<template>
  <div class="orders">
    <!-- 订单列表 -->
    <div class="order-list">
      <div class="order-item"
           v-for="item in orderList"
           :key="item.oid">
        <h5>订单号——{{item.oid}}</h5>
        <!-- 订购的商品信息 -->
        <el-table :data="item.orderItem"
                  style="width: 100%">
          <el-table-column label="图片"
                           align="center"
                           width="70">
            <template slot-scope="scope">
              <img :src="scope.row.goodsImg"
                   alt=""
                   style="width: 30px;height: 30px" />
            </template>
          </el-table-column>
          <el-table-column prop="goodsName"
                           label="名称"
                           align="center"
                           width="130">
          </el-table-column>
          <el-table-column prop="num"
                           label="数量"
                           align="center"
                           width="80">
          </el-table-column>
          <el-table-column prop="goodsPrice"
                           label="单价"
                           align="center"
                           width="120">
          </el-table-column>
        </el-table>
        <!-- 买家信息 -->
        <div class="rel-mes">
          <div class="total">总价格:<span>{{item.totalPrice}}</span></div>
          <div>联系人：<span>{{item.username}}</span></div>
          <div>电话号码：<span>{{item.phone}}</span></div>
          <div>收货地址：<span>{{item.city}}</span></div>
          <div>创建时间：<span>{{item.createTime}}</span></div>
        </div>
        <!-- 删除订单 -->
        <div class="del-btn"
             @click="delCurrentOrder(item.oid)">删除</div>
      </div>
    </div>
    <el-empty v-if="orderList.length<1"
              description="你还没有订单哦"></el-empty>
  </div>
</template>
<script>
import { myOrder, delOrder } from '@/api/article'
export default {
  data() {
    return {
      orderList: []
    }
  },
  methods: {
    async initOrderList() {
      let { data: res } = await myOrder()
      console.log(res.data)
      this.orderList = res.data
    },
    // 删除订单
    async delCurrentOrder(id) {
      let { data: res } = await delOrder(id)
      console.log(res)
      this.initOrderList()
    }
  },
  created() {
    this.initOrderList()
  }
}
</script>

<style lang="less" scoped>
.orders {
  width: 850px;
  min-height: 300px;
  .order-list {
    width: 820px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .order-item {
    position: relative;
    width: 400px;
    margin-top: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: '黑体';
    h5 {
      margin-bottom: 5px;
      text-align: center;
      line-height: 45px;
      font-size: 15px;
      border-bottom: 1px solid #ccc;
    }
    ::v-deep(.el-table) {
      border: none;
      tr {
        td,
        th {
          padding: 5px 10px;
        }
      }
    }
    .rel-mes {
      margin: 7px 0 7px 5px;
      display: flex;
      flex-wrap: wrap;
      font-size: 13px;
      .total {
        padding-right: 30px;
        text-align: right;
        font-size: 16px;
        box-sizing: border-box;
        span {
          padding-left: 5px;
          font-weight: 600;
        }
      }
      div {
        width: 100%;
        span {
          color: #000;
        }
      }
    }
    /* 删除按钮 */
    .del-btn {
      position: absolute;
      right: 10px;
      bottom: 10px;
      color: #fd4c5d;
      font-size: 12px;
      padding: 1px 7px;
      border-radius: 4px;
      border: 1px solid #fd4c5d;
      cursor: pointer;
      &:hover {
        background-color: #fd4c5d;
        color: #fff;
      }
    }
  }
}
</style>